<template>
      <div class="logredi" v-show="this.$store.state.userlog">
      <div class="users">
            <img src="../assets/img/register/叉号.png" alt="" class="cha" @click="showRegister">
            <div class="tit">
               <span class="spanp spa"><p id="p1" class="cur" @click="linklog">短信登录</p></span>
            <span class="spanp"><p id="p2" @click="linklag">360账号登录</p></span>
            </div>
           <!-- 11111111 -->
            <div class="phonelog " v-show="ablog">
              <div class="row1">
              <input class="phone" type="text" placeholder="手机号" v-model="cellPhone" />
              </div>
              <p style="color:red;" v-show="format1">手机号格式不对</p>
              <!-- ----- -->
          <div class="row2">
          <input type="text" placeholder="短信验证" v-model="sms" class="note phone" /><button class="span" @click="getnum" :disabled="change">{{num}}{{text}}</button>
          </div>
          <p style="color:red" v-show="format3">验证码错误</p>
            </div>
            <!-- 22222222 -->
            <div class="emlog phonelog" v-show="!ablog">
                  <div class="row1">
              <input class="phone" type="text" placeholder="手机号/用户名/邮箱" v-model="cellPhone" />
              </div>
              <p style="color:red;" v-show="format1">手机号格式不对</p>
              <!-- ---- -->
             <div class="row1 row2">
              <input class="phone" type="text" placeholder="密码" v-model="pwd" />
              </div>
            </div>
            <!-- 登录 -->
            <button class="log" @click="loginto">登录</button>
            <div class="tiao">
              <span>快速注册</span>
              <span>找回密码</span>
            </div>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cellPhone:'',
     sms:'',
      text:'获取验证码',
     sign:'对号_wps图片',
     sign1:'手机_wps图片',
     format1:false,
      sign3:'短信_wps图片',
     format3:false,
     change:false,
     num:'',
     pwd:'',
     ablog:true
      }
    },
    methods: {
    showRegister() {
      this.format1=this.format2=false
      this.cellPhone=this.sms=''
      this.$store.commit('updatelogin',false)
      this.format1=false
    },
        checkPhone(){
     return new Promise((resolve, reject) => {  
      let reg=/^1[3-9]\d{9}$/
      if(this.cellPhone.trim()==''){
       return  this.format1=true
      }else if(this.cellPhone.trim() && reg.test(this.cellPhone.trim())){
      resolve(  this.format1=false,
        this.sign1=this.sign )
      }else {
      reject ( this.format1=true)
      } 
      });    
    },
       checknumber(){
     return new Promise((resolve, reject) => {  
     let reg=/^\d{4}$/
      if(this.sms.trim()==''){
       return
      }else if(this.sms.trim() && reg.test(this.sms.trim())){
     resolve(   this.format3=false,
        this.sign3=this.sign)
      }else {
        reject (this.format3=true) 
      }  
       });     
   },
      getnum(){
        this.checkPhone()
      if(this.format1==true){ return}  
      this.num=60
      this.text='秒后重试'
      this.change=true
   let timer=setInterval(() => {       
       this.num--
       if(this.num==0){
         clearInterval(timer)
          this.num=""
      this.text='获取验证码'
      this.change=false
         }
       
     }, 1000);
   },
  //  两个登录之间的跳转
   linklog(){
      let cur=document.querySelector('p.cur')
     cur.className=''
      let p1=document.getElementById('p1')
      p1.className='cur'
       this.ablog=true
   },
   linklag(){
     let cur=document.querySelector('p.cur')
     cur.className=''
      let p2=document.getElementById('p2')
      p2.className='cur'
      this.ablog=false
   },
  //  点击登录
  loginto(){
    let url='/login'
    let params=`phone=${this.cellPhone}&upwd=${this.pwd}`
    this.axios.post(url,params).then(res=>{
      console.log(res);
      console.log(this);
      if(res.data.code==1){
        alert('登录成功')
        this.$router.push('/')
        this.$store.commit('updatelogin',false)
        this.cellPhone=this.pwd=''
        this.$store.commit('updateuseron',true)
        console.log(this.cellPhone);
        sessionStorage.setItem('uphone',this.cellPhone)
      }else {
           this.$msgbox('提示','用户密码错误')          
          }
    })
  }
    },
  }
</script>

<style lang="scss" scoped>
.logredi {
  width: 100vw;
  height: 100rem;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  // padding-top: 10em;
  .users {
    color: #333;
    width: 400px;
    padding: 10px 0 74px;
    background-color: #fff;
    z-index: 40;
    margin:auto;
    padding-top: 40px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.16);
    opacity: 1;
    position: fixed;
    top: 18vh;
    left: 32vw;
    .cha{
      width: 22px;
      height: 22px;
      position: absolute;
      left: 373px;
      top: 7px;
    }
    div.tit{
      text-align: center;
      .spanp{
      display: inline-block;
         
          font-weight: 500;
          font-size: 20px;
             padding: 0 20px;
    p.cur{
      border-bottom: 1px solid #36b447;
       color: #36b447;
    }
    }
       .spanp.spa{
      border-right: 1px solid #ddd;
    }
    span:hover{
      color: #36b447;
    }
    
 
    }
    .phonelog{
       width: 300px;
       margin: auto;
      div.row1{
       margin-top: 36px;
          }
        .phone{
          width: 278px;
              border-radius: 2px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #333;
    height: 20px;
    line-height: 20px;
     padding: 10px;
         outline: none;
     margin: auto;
     
      }
      div.row2{
        margin-top: 19px;
        .note{
          width: 180px;
        }
         button.span{
        // color: #36b447;
        display: inline-block;
         border: 1px solid #ddd;
         padding: 11px 14px 12px 13px;
         background-color: #fafafa;
      }
      }
    }
    .emlog{
       .row2{
         margin-top: 20px;
       }
    }
     button.log{
       display: block;
       font-size: 18px;
       width: 298px;
       height: 42px;
       line-height: 42px;
    border-color: #36b447;
    background-color: #36b447;
    color: #fff;
    margin: auto;
    margin-top: 22px;
     }
     div.tiao{
       width: 298px;
       margin:20px auto;
       display:flex;
       justify-content: space-between;
       span{
        
         display: inline-block;
       }
     }
  }
}
</style>